<script setup>
import {ref, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {fetchUser, getUser, logout} from "@/components/userInfo.js";
import Identify from "@/components/captcha/Identify.vue";
import {captchaCode, generateCode} from '@/components/Captcha/captcha.js'
import {post} from "@/util/axios.js";

const emailForm = ref()

// 模拟当前绑定的邮箱

const form = reactive({
    newEmail: '',
    captcha: captchaCode
})

// 验证邮箱格式
const validateEmail = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入邮箱'))
    } else {
        callback()
    }
}

const validateCaptcha = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入验证码'))
    } else {
        callback()
    }
}

const rules = reactive({
    newEmail: [
        {required: true, validator: validateEmail, trigger: 'blur'},
        // {type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change']}
    ],
    captcha: [
        {required: true, validator: validateCaptcha, trigger: 'blur'}
    ]
})


// 提交表单

const captchaTest = ref('');
const submitForm = () => {
    captchaTest.value = form.captcha.toUpperCase()
    emailForm.value.validate((valid) => {
        if (valid) {
            if (captchaTest.value !== captchaCode.value) {
                ElMessage.error('验证码错误!')
                generateCode()
                return false
            }
            post('/user/updateEmail', {email: form.newEmail}, async content => {
                currentEmail.value = form.newEmail
                await fetchUser()
                await resetForm()
            })
            generateCode()
        } else {
            ElMessage.error('请正确填写表单!')
            generateCode()
            return false
        }
    })
}

// 重置表单
const resetForm = () => {
    emailForm.value.resetFields()
    generateCode()
}
</script>
<template>
    <div class="email-change-container">
        <h2 class="title">更换邮箱</h2>

        <el-form
                ref="emailForm"
                :model="form"
                :rules="rules"
                label-width="120px"
                class="email-form">
            <el-form-item label="当前邮箱">
                <el-input
                        :value="getUser.email"
                        disabled
                />
            </el-form-item>

            <el-form-item label="新邮箱" prop="newEmail">
                <el-input
                        v-model="form.newEmail"
                        placeholder="请输入新邮箱"
                        clearable
                />
            </el-form-item>

            <el-form-item label="验证码" prop="captcha">
                <div class="captcha-wrapper">
                    <el-input
                            v-model="form.captcha"
                            placeholder="请输入验证码"
                            class="captcha-input"
                            clearable/>
                    <Identify class="captcha"/>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style scoped>
.captcha-wrapper {
    display: flex;
    gap: 10px;
    height: 40px;
}

.el-input {
    height: 40px;
}

.email-change-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    width: 100%;
}

.title {
    margin-bottom: 30px;
    color: #333;
}

.email-form {
    width: 400px;
    max-width: 90%;
}

.verification-code-container {
    display: flex;
    align-items: center;
    width: 100%;
}
</style>